<template>
    <div><table></table>
        <div class="form">
            <!--表单-->
            <Form :model="formItem"  :rules="ruleValidate" ref="formItem" >
                <List>
                    <ListItem >
                        <FormItem label="" prop="borrower_type" style="padding-top: 12px"><span>*</span> <span class="text ">类型</span>
                            <div @change="linkage">
                                <RadioGroup v-model="formItem.borrower_type" >
                                    <Radio label="自然人" ></Radio>
                                    <Radio label="企业" ></Radio>
                                    <Radio label="农民专业合作社(联合社)"></Radio>
                                </RadioGroup>
                            </div>
                        </FormItem>
                    </ListItem>
                    <ListItem class="fa-l"><span>*</span> <span class="text ">名称</span>
                        <FormItem label="" prop="borrower" class="son-r">
                            <Input v-model="formItem.borrower" placeholder="输入名称"></Input>
                        </FormItem>
                    </ListItem>
                    <ListItem class="fa-l"><span>*</span>  <span class="document ">证件类型</span>
                        <FormItem label="" prop="borrower_certificate_type" class="son-r">
                            <Input v-model="formItem.borrower_certificate_type"  disabled ></Input>
                        </FormItem>
                    </ListItem>
                    <ListItem class="fa-l"><span>*</span> <span class="text ">证件号码</span>
                        <FormItem label="" prop="borrower_certificate_number" class="son-r">
                            <Input v-model="formItem.borrower_certificate_number" :placeholder="msg"></Input>
                        </FormItem>
                    </ListItem>
                    <listItem class="fa-l"><span>*</span> <span class="text ">手机号</span>
                        <FormItem label="" prop="borrower_phone" class="son-r">
                            <Input v-model="formItem.borrower_phone" placeholder="输入手机号码"></Input>
                        </FormItem>
                    </listItem>
                    <listItem class="fa-l"><span>*</span> <span class="text">短信验证码</span>
                        <FormItem label="" prop="verify">
                            <Input class="verify" v-model="formItem.verify" placeholder="输入验证码"></Input>
                            <Button class="apply verifyBtn"   @click="getVerify" v-if="!sendMsg" style="background-color: #fff;color: #17A365 ">发送验证码</Button>
                            <span class="verifyBtn" style="color: #17A365;text-align: center;margin-left: 45px"  v-else :v-model="count">{{count}}</span>
                        </FormItem>
                    </listItem>
                </List>
            </Form>

        </div>
        <!--说明-->
        <div class="explain">
            <div class="ex_title"> <img src="@/assets/images/Stroke.png" width="14px"> <span>说明：</span> </div>
            <div>
                <div>1.提交申请后，工作人员会与您联系填报详细的相关资料；</div>
                <div>2.审核过程和结果可以通过三七通APP查看；<br/><span class="download">点击下载</span></div>
            </div>
        </div>

        <div>
            <Button class="apply" style="margin-bottom: 100px" @click="handleCreate">提交申请</Button>
        </div>

    </div>
</template>
<script>
    import { PostSqcdzyd, GetVerify } from '@/api/sqcdzyd';
    export default {
        name: 'sqcdzyd-application',
        data () {
            // 借方电话号码校验规则
            const validatePhone = (rule, value, callback) => {
                if (!value) {
                    // return callback(new Error('电话号码不能为空'));
                    this.$Message['error']({ content: '电话号码不能为空' });
                } else {
                    const regPhone = /^1[3-9]\d{9}$/;
                    if (regPhone.test(value)) {
                        this.adopt1 = true;
                        callback();
                    } else {
                        this.adopt1 = false;
                        this.$Message['error']({ content: '请输入正确的电话号码' });
                        // return callback(new Error('请输入正确的电话号码'))
                    }
                }
            };
            // 借方证件号码校验规则（18位数字或大写字母组成）
            const validateNumber = (rule, value, callback) => {
                if (!value) {
                    // return callback(new Error('证件号码不能为空'));
                    this.$Message['error']({ content: '证件号码不能为空' });
                } else {
                    const regNum = /^[A-Z\d]{18}$/
                    if (regNum.test(value)) {
                        this.adopt2 = true;
                        callback();
                    } else {
                        this.adopt2 = false;
                        this.$Message['error']({ content: '请输入正确的号码(若有英文请用大写)' });
                        // return callback(new Error('请输入正确的号码(若有英文请用大写)'));
                    }
                }
            };
            // 验证码校验规则
            const validateVerify = (rule, value, callback) => {
                if (!value) {
                    this.$Message['error']({ content: '验证码不能为空' });
                    // return callback(new Error('验证码不能为空'));
                } else {
                    callback();
                }
            };
            // 验证码校验规则
            const validateName = (rule, value, callback) => {
                if (!value) {
                    this.$Message['error']({ content: '名称不能为空' });
                    // return callback(new Error('验证码不能为空'));
                } else {
                    callback();
                }
            };
            return {
                count: 60,
                sendMsg: false,
                adopt1: false,
                adopt2: false,
                isNull: false,
                msg: '输入身份证号',
                formItem: {
                    borrower: '',
                    borrower_type: '自然人',
                    borrower_certificate_number: '',
                    borrower_phone: '',
                    borrower_certificate_type: '身份证',
                    verify: ''
                },
                ruleValidate: {
                    borrower: [{ validator: validateName, trigger: 'blur' }],
                    borrower_phone: [{ validator: validatePhone, trigger: 'blur' }],
                    borrower_certificate_number: [{ validator: validateNumber, trigger: 'blur' }],
                    verify: [{ validator: validateVerify, trigger: 'blur' }]
                }
            }
        },
        methods: {
            // 提交表单信息
            handleCreate () {
                for (const key in this.formItem) {
                    if (this.formItem[key] === '') {
                        this.isNull = true;
                    } else {
                        this.isNull = false;
                    }
                }
                // 判断是否可以提交（信息完善且无错误）
                if (this.isNull === true) {
                    this.$Message['error']({ content: '请完善信息' });
                } else if (this.adopt1 === true && this.adopt2 === true) {
                    PostSqcdzyd({
                        borrowerType: this.formItem.borrower_type,
                        borrowerName: this.formItem.borrower,
                        borrowerCertificateType: this.formItem.borrower_certificate_type,
                        borrowerCertificateNumber: this.formItem.borrower_certificate_number,
                        borrowerPhone: this.formItem.borrower_phone,
                        code: this.formItem.verify
                    })
                        .then(res => {
                            console.log(res);
                            this.$router.push('/sqcdzyd/application/result');
                        })
                        .catch(err => {
                            console.log(err);
                            // this.$Message['error']({ content: err.message });
                        })
                } else {
                    this.$Message['error']({ content: '请修改信息' });
                }
            },
            // 获取验证码
            getVerify () {
                let regPhone = /^1[3-9]\d{9}$/
                if (!this.formItem.borrower_phone) {
                    this.$Message['error']({ content: '请先输入联系电话' });
                } else if (regPhone.test(this.formItem.borrower_phone)) {
                    GetVerify(this.formItem.borrower_phone)
                        .then(res => {
                            console.log(res);
                            this.$Message.success('验证码已发送请等待接收');
                            this.sendMsg = true;
                            this.count = 60;
                            this.timer = setInterval(() => {
                                this.count--;
                                if (this.count < 0) {
                                    clearInterval(this.timer);
                                    this.sendMsg = false;
                                }
                            }, 1000);
                        })
                        .catch(err => {
                            console.log(err)
                        })
                } else {
                    this.$Message['error']({ content: '电话号码错误' });
                }
            },
            // 监听贷方主体类型变化
            linkage () {
                if (this.formItem.borrower_type === '自然人') {
                    this.formItem.borrower_certificate_type = '身份证';
                    this.msg = '输入身份证号';
                } else {
                    this.formItem.borrower_certificate_type = '营业执照';
                    this.msg = '输入统一社会信用代码';
                }
            }
        }
    }
</script>
<style lang="less" scoped>
.form{
    height: 372px;
    background-color: #fff;
    margin: 16px;
    border-radius: 16px;
    font-size: 14px;
}
.form span{
    color: red;
    margin-right: 5px;
}
.explain{
    margin: 16px;
    padding-bottom: 10px;
    font-size: 16px;
}
.explain>div>div{
    margin-top: 6px;
}
.ex_title{
    color: #17A365;
    line-height: 20px;
    display: flex;
}
.ex_title img{
    margin: 3px;
}
.form .document{
    color: #636363;
}
.form .text{
    color: #000;
    font-weight: 400;
}
.ivu-select,/deep/ .ivu-select-single .ivu-select-selection,/deep/ .ivu-input{
    height: 44px;
    color: #000;
}
/deep/ .ivu-select-single .ivu-select-selection .ivu-select-placeholder,/deep/ .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
    line-height: 44px;
}
/deep/ .ivu-form-item{
    margin-bottom: 12px;
}
/deep/ .ivu-form-item-error-tip{
    padding: 7px 0 0 7px;
    font-size: 14px;
    position: relative;
    text-align: right;
}
/deep/ [data-v-8a5a7fd4] .ivu-form-item{
    margin-bottom: 23px;
}
/deep/ .ivu-radio-wrapper{
    margin-right: 4px;
    font-size: 14px;
}
/deep/ .ivu-radio-wrapper:last-child{
    margin-right:0;
    font-size: 14px;
}
/deep/ .ivu-form-item-content{
    line-height: 30px;
    font-size: 16px;
}
/deep/ .ivu-input[disabled], fieldset[disabled] {
    background-color: #fff;
    color: #636363;
}
.fa-l{
    position: relative;
    font-size: 16px;
}
.son-r{
    position: absolute;
    right: 10px;
    top:4px
}
.myCard>p{
    text-align: left;
    margin-top: 12px;
    display: block;
}
/deep/.ivu-list-item{
    padding: 0 12px 0 12px;
    height: 52px;
    line-height: 52px;
    align-items: baseline;
    margin-bottom: 5px;
}
/deep/.ivu-list-item:first-child{
    height: 80px;
    line-height: 80px;
}
/deep/.ivu-list-item:last-child .ivu-input{
    width: 100px;
    text-align: center;
    position: relative;
}
/deep/ .myCard .ivu-input{
    border: none;
    text-align: right;
    width: 80%;
    position: absolute;
    right: 0;
    top: -15px;
}
/deep/ .myCard .verifyd .ivu-input{
    border:1px solid #17A365;
    width: 40%;
    text-align: center;
    position: static;
    margin: 0 auto;
}
/deep/ .ivu-input{
    text-align: left;
    border: none;
    width: 53vw;
    padding: 0;
    margin-right: 5px;
}
.verifyd{
    text-align: center;
    width: 40%;
    position: initial;
}
/deep/ .ivu-form-item-validating .ivu-input-icon + .ivu-input{
    padding-right: 0px;
}
/deep/ .ivu-form-item-validating .ivu-input-icon-validate{
    display: none;
}
/deep/ .ivu-form-item:before, .ivu-form-item:after{
    display: inline;
}
.verify{
    width:17vw;
    margin-left: 5px;
    text-align: center;
}
.verifyBtn{
    width: 100px;
    display: inline-block;
    margin-bottom: 0;
    border-radius: 8px;
    margin-left: 40px;
    box-shadow: none;
    padding: 0;
    font-size:14px
}
/deep/ .ivu-list-split .ivu-list-item{
    border-bottom: none;
}
/deep/ .ivu-date-picker-focused input,/deep/ .ivu-input:hover{
    box-shadow: none;
}
</style>
